<template>
	<view>
		<!-- 及格 -->
		<view class="wrap" v-if="examstate==true">
			<u-row gutter="16">
				<u-col span="12" text-align="center" style="padding-bottom: 30rpx;">
					<view class="demo-layout ">您的最终成绩：<span style="font-size: 60rpx;">{{list1.grade}}分</span></view>
				</u-col>
				<u-col span="12" text-align="center" style="padding-bottom: 20rpx;">
					<view class="demo-layout">恭喜你通过测试。赠送一次抽奖机会</view>
				</u-col>
				<u-col span="12" text-align="center">
					<view class="demo-layout choujiang">
						<LuckyWheel ref="luckyWheel" width="600rpx" height="600rpx" :blocks="blocks" :prizes="prizes" :buttons="buttons"
						 :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
					</view>
				</u-col>
			</u-row>
			<u-modal v-model="show" :content="content"></u-modal>
		</view>
		<!-- 未及格 -->
		<view class="content" v-if="examstate==false">
			<u-row gutter="16">
				<u-col span="12" text-align="center" style="padding-bottom: 20rpx;">
					<view class="demo-layout ">共获得<span style="font-size: 60rpx;">{{list1.grade}}分</span></view>
				</u-col>
				<u-col span="12" text-align="center">
					<view class="demo-layout ">很遗憾您未能通过测试，请重新考试</view>
				</u-col>

				<u-col span="12" text-align="center">
					<view>
						<button class="button-demo">重新考试</button>
					</view>
				</u-col>
				<view style="position: fixed;bottom:0;">广告位</view>
			</u-row>
		</view>
		<!-- 底部广告 -->
		<view style="position: fixed;bottom:0; height: 200rpx;width: 100%; margin-left: -23rpx;">
			<view class="u-demo-area">
				<u-swiper @change1="change" :height="200" :list="list" :title="title" :effect3d="effect3d" :indicator-pos="indicatorPos"
				 :mode="mode" :interval="3000" @click="click1"></u-swiper>
			</view>
		</view>
		<u-modal v-model="show1" :content="content1"></u-modal>
	</view>
</template>

<script>
	import LuckyWheel from 'uni-luck-draw/lucky-wheel'
	export default {
		components: {
			LuckyWheel
		},
		data() {
			return {
				ifprize:false,
				examinationId: '',
				show1: false,
				content1: "123456",
				/* 轮播图 */
				list: [],
				list1: [],
				title: false,
				mode: 'round',
				indicatorPos: 'bottomCenter',
				effect3d: true,
				//是否及格
				examstate: false,
				//是否已经抽过奖
				state: false,
				show: false,
				content: '您已经抽过了请勿重复抽取',
				blocks: [{
					padding: '13px',
					background: '#d64737'
				}],
				prize: [],
				prizes: [{
						title: '1',
						background: '#f9e3bb',
						fonts: [{
							text: '钟离',
							top: '25'
						}]
					},
					{
						title: '2',
						background: '#f8d384',
						fonts: [{
							text: '继续努力',
							top: '25%'
						}]
					},
					{
						title: '3',
						background: '#f9e3bb',
						fonts: [{
							text: '继续努力',
							top: '25%'
						}]
					},
					{
						title: '4',
						background: '#f8d384',
						fonts: [{
							text: '继续努力',
							top: '25%'
						}]
					},
					{
						title: '5',
						background: '#f9e3bb',
						fonts: [{
							text: '继续努力',
							top: '25%'
						}]
					},
					{
						title: '6',
						background: '#f8d384',
						fonts: [{
							text: '继续努力',
							top: '25%'
						}]
					},
					{
						title: '7',
						background: '#f9e3bb',
						fonts: [{
							text: '继续努力',
							top: '25%'
						}]
					},
					{
						title: '8',
						background: '#f8d384',
						fonts: [{
							text: '继续努力',
							top: '25%'
						}]
					},

				],
				buttons: [{
						radius: '50px',
						background: '#d64737'
					},
					{
						radius: '45px',
						background: '#fff'
					},
					{
						radius: '41px',
						background: '#f6c66f',
						pointer: true
					},
					{
						radius: '35px',
						background: '#f6c66f',
						fonts: [{
							text: '开始\n抽奖',
							fontSize: '18px',
							top: -18
						}]
					}
				],
				defaultStyle: {
					fontColor: '#d64737',
					fontSize: '14px'
				},
				listluck:[]
			}
		},
		onLoad: function(option) {
			this.examinationId = option.examinationId
			this.$u.api.selectrecommend({
				recommendPage: "0"
			}).then(res => {
				this.list = res.rows;
				console.log(this.list);
			});
			this.$u.api.selectExaminationFrontResult({
				studentId: getApp().globalData.studentId,
				examinationId: option.examinationId
			}).then(res => {
				this.list1 = res.rows[0];
				this.examstate = this.list1.pass;
				this.state = this.list1.prizeType;

				this.prize = this.list1.examinationFrontPrize;
				for (var i = 0; i < this.prize.length; i++) {
					this.prizes[i].fonts[0].text = this.prize[i].prizeName
					 this.listluck[i] = this.prize[i].prizeName
				}
			});
		},
		methods: {
			//轮播
			change1(index) {
				// console.log(index);
			},
			click1() {
				// console.log(index);
			},
			open() {
				this.show = true;
			},
			// 点击抽奖按钮触发回调
			startCallBack() {
				//判断抽奖权限
				if (this.state == true) {
					this.$refs.luckyWheel.play()
					// 使用定时器来模拟请求接口
					console.log(this.examinationId)
					this.$u.api.luckDraw({
						studentId: getApp().globalData.studentId,
						examinationId: this.examinationId
					}).then(res => {
						console.log(res.rows[0].prizeId)
						// 3s后得到中奖索引
						let index = 7;
						if(res.rows[0].prizeId==0){
							this.ifprize=true;
						}else{
							this.ifprize=false;
							for(var j = 0;j<this.listluck.length;j++){
								if (this.listluck[j]==res.rows[0].prizeName){
									index = j
									break
								}
							}
						}
						// 缓慢停止游戏
						this.$refs.luckyWheel.stop(index)
						
					});
					this.state = false;
				} else {
					this.show = true;
				}
				// 先开始旋转

			},
			// 抽奖结束触发回调
			endCallBack(prize) {
				// 奖品详情
				console.log(prize.fonts[0].text)
				if (this.ifprize==true) {
					this.content1 = "谢谢参与，下次继续努力"
					this.show1 = true
				} else {
					this.content1 = "恭喜抽中" + prize.fonts[0].text + "请查看个人中心-我的奖品。到相应地点兑奖"
					this.show1 = true
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;

	}

	.choujiang {
		height: 40px;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.content {
		padding: 24rpx;
		display: flex;
		font-size: 35rpx;
	}

	.button-demo {
		width: 300rpx;
		height: 300rpx;
		border-radius: 150rpx 150rpx 150rpx 150rpx;
		background-color: #849bf3;
		color: #ffffff;
		margin-top: 250rpx;
		font-size: 50rpx;
		line-height: 280rpx;
		/*针对IE*/
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;

	}

	.choujiang {
		height: 40px;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}


	.footer {

		position: fixed;
		bottom: 0; //可以更改为自己的需求距离底部的长度
	}
</style>
